<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>网格布局和 flex布局</title>
  <style>
    body {
      width: 300px;
      position: relative;
    }

    .aside {
      width: 100px;
      height: 100px;
      float: left;
      background: rgb(117, 102, 255);
    }

    .main {
      overflow: hidden;
      height: 200px;
      background: #fcc;
    }

    .gridContainer {
      display: grid;
      background-color: #f66;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-gap: 5px;
      /* grid-template-areas: 'a b c'
        'd e f'
        'g h i'; */
      grid-template-areas: 'a a a'
        'b b b'
        'c c c';
      justify-items: left;
      align-items: center;
    }

    .gridchild {
      border: black 1px solid;
    }

    .flexContainer {
      display: flex;
      background-color: #f66;
      width: 600px;
      height: 300px;
      /* flex-direction: column; */
      flex-wrap: wrap;
      /* justify-content: space-around; */
      /* align-items: stretch; */
      /* align-content: flex-end; */
    }

    .child {
      width: 100px;
      height: 100px;
      flex-grow: 1;
    }

    .child1 {
      /* width: 100px;
      height: 100px; */
      order: 2;
      flex-grow: 2;
    }

    .child2 {
      /* width: 100px;
      height: 100px; */
      order: 1;
      flex-grow: 2;
      align-self: flex-end;
    }
  </style>


</head>

<body>
  <div class="gridContainer">
    <div class="gridchild">
      <p>1</p>
    </div>
    <div class="gridchild">
      <p>2</p>
    </div>
    <div class="gridchild">
      <p>3</p>
    </div>

    <div class="gridchild">
      <p>4</p>
    </div>
    <div class="gridchild">
      <p>5</p>
    </div>
    <div class="gridchild">
      <p>6</p>
    </div>

    <div class="gridchild">
      <p>7</p>
    </div>
    <div class="gridchild">
      <p>8</p>
    </div>
    <div class="gridchild">
      <p>9</p>
    </div>
  </div>

  <div class="bfc" style="margin-top: 10px;">
    <div class="aside"></div>
    <div class="main"></div>
  </div>

  <div class="flexContainer" style="margin: 10px;">
    <div class="child child1" style="background-color: rgb(230, 247, 1);">
      <p>1</p>
    </div>
    <div class="child child2" style="background-color: rgb(5, 134, 247);">
      <p>2</p>
    </div>
    <div class="child" style="background-color: rgb(95, 247, 7);">
      <p>3</p>
    </div>

    <div class="child" style="background-color: aquamarine;">
      <p>4</p>
    </div>
    <div class="child" style="background-color: bisque;">
      <p>5</p>
    </div>
    <div class="child" style="background-color: brown;">
      <p>6</p>
    </div>

    <div class="child" style="background-color: burlywood;">
      <p>7</p>
    </div>
    <div class="child" style="background-color: chartreuse;">
      <p>8</p>
    </div>
    <div class="child" style="background-color: cornflowerblue;">
      <p>9</p>
    </div>
  </div>
</body>

<script>

</script>

</html>